<template>
  <div class="com-contain">
    <div class="com-chart" ref="sel"></div>
  </div>
</template>

<script>
import MapDate from "@/assets/json/jian";
export default {
  data() {
    return {
      chartinit: null,
      pieData: [],
      chartMapData: [
        { name: "吉州区", value: 12 },
        { name: "青原区", value: 15 },
        { name: "吉安县", value: 22 },
        { name: "吉水县", value: 2 },
        { name: "峡江县", value: 5 },
        { name: "新干县", value: 9 },
        { name: "永丰县", value: 99 },
        { name: "泰和县", value: 12 },
        { name: "遂川县", value: 23 },
        { name: "万安县", value: 67 },
        { name: "安福县", value: 62 },
        { name: "永新县", value: 52 },
        { name: "井冈山市", value: 2 },
      ], //echart地图

      scatterData:[
          {
              value:['115.134569','27.213445']
          }
      ]
    };
  },

  mounted() {
    this.initEcharts();
    this.updateChart();
  },
  methods: {
    initEcharts() {
      this.chartinit = this.$echarts.init(this.$refs.sel);
    },
    //获取数据
    getList() {},

    //更新
    updateChart() {
      console.log(MapDate);
      this.$echarts.registerMap("jian", MapDate);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        geo: {
          type: "map",
          map: "jian",
          label: {
            show: true,
          },
        },
        series: [
          {
            data: this.chartMapData,
            geoIndex: 0,
            type: "map",
          },
          {
              data:this.scatterData, //配置散点的坐标数据
              type:'effectScatter',
              coordinateSystem:'geo', //指明使用GEO坐标系统
              rippleEffect:{
                  scale:10
              }
          }
        ],
        visualMap: {
          min: 0,
          max: 100,
          inRange:{
              color:['white','red']
          }
        },
      };
      this.chartinit.setOption(option);
    },
  },
};
</script>

<style></style>
